<template>
    <div class='container'>
        <view class="contents">
            互斥展开<t-switch v-model="mutex" /> 整个节点<t-switch v-model="expandOnClickNode" />
            <t-tree :data="items" hover :on-expand="propOnExpand" @click="onClick" @expand="onExpand" :mutex="mutex"
                :expand-on-click-node="expandOnClickNode" :expand-level="1" />
        </view>
        <div class="list">
            <t-input autofocus size="small" @enter="onEnter" :value="click_search" />
            <div class="list-item" v-for="item in list_data" :key="item.id" @click="onNoteClick(item)">
                {{ item.id }} {{ item.title }}
            </div>
        </div>
        <div class="content">
            <div class="note" v-if="note_content">
                <div class="header">
                    <div class="title">{{ note_content.title }}</div>
                    <t-switch v-model="isEdit">
                        <template #label="slotProps">{{ slotProps.value ? '编辑' : '预览' }}</template>
                    </t-switch>
                </div>
                <div class="preview" v-if="!isEdit">预览</div>
                <div class="edit" v-else>编辑</div>
                {{ note_content }}
            </div>
            <div v-else>没有啊</div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { TreeProps } from 'tdesign-vue-next';
import { getTreeAPI } from '@/api/tree';
import { getNoteAPI, getNodeDetailAPI } from '@/api/note';
const mutex = ref(true);
const expandOnClickNode = ref(true);
const items = ref<TreeProps['data']>()
const list_data = ref()
const click_search = ref()
const note_content = ref()
const isEdit = ref(false)
const onClick: TreeProps['onClick'] = (context) => {
    console.info('onClick', context.node.label);
    click_search.value = context.node.label
};
const onExpand: TreeProps['onExpand'] = (value, context) => {
    console.info('onExpand', value, context);
};
const propOnExpand: TreeProps['onExpand'] = (value, context) => {
    console.info('propOnExpand', value, context);
};

const onEnter = async () => {
    list_data.value = await getNoteAPI();
}

const onNoteClick = async (item: any) => {
    console.log(item);
    note_content.value = await getNodeDetailAPI(item.id)
}
onMounted(async () => {
    items.value = await getTreeAPI();
})
</script>
<style lang='scss' scoped>
.container {
    display: flex;
    flex-direction: row;
    gap: 2px;

    .contents {
        flex: 1;
        border: 1px solid;
        border-color: aqua;
        height: 100vh;
        border-radius: 5px;
        // background-color: #7a3b3b;
    }

    .list {
        flex: 1;
        border-radius: 5px;
        border: 1px solid;
        border-color: aqua;
        height: 100vh;
        // background-color: #ea1212;
    }

    .content {
        flex: 5;
        border-radius: 5px;
        border: 1px solid;
        border-color: rgb(5, 227, 227);

        .header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

        }
    }
}
</style>